/**
 * @parma author ludan
 * @param explain 网盘Table列表
 */
import React, { useState, useEffect } from 'react'
import { Observer } from 'mobx-react-lite'
import './index.less'
import { Table, Tag, Button, Popconfirm, message } from 'antd'
import type { ColumnsType } from 'antd/es/table';
import { fetchCourseList } from '@/requests/course';

export interface baseNetworkTableType {
  editBtnClose?: (record: object) => void;
  scroll?: object
}

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
  tags: string[];
  id: number
}

const data: DataType[] = [];
for (let i = 0; i < 10; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32 + i,
    address: `London, Park Lane no. ${i}`,
    id: 10 + i,
    tags: ["react", "vue"]
  });
}



const NetworkTable: React.FC<baseNetworkTableType> = ({ editBtnClose, scroll }) => {
  const [list, setList] = useState([])

  useEffect(() => {
    fetchCourseList().then(res => {
      console.log(res, 'res')
    })
  }, [])

  const confirm = () => {
    message.info('删除该条数据成功')
    return
  };

  const columns: ColumnsType<DataType> = [
    {
      title: '课程题目',
      dataIndex: 'name',
    },
    {
      title: '课程编号',
      dataIndex: 'id',
      sorter: {
        compare: (a, b) => a.id - b.id,
        multiple: 3,
      },
    },
    {
      title: '技术标签',
      dataIndex: 'tag',
      render: (_, { tags }) => (
        <>
          {tags.map((k, i) => <Tag color="#2db7f5" key={i}>{tags}</Tag>)}
        </>
      ),
    },
    {
      title: '操作',
      dataIndex: 'opations',
      render: (text, record) => (
        <div>
          <Tag color='blue' onClick={() => editBtnClose && editBtnClose(record)}>编辑课程</Tag>
          <Popconfirm placement="top" title={"是否删除这一项？"} onConfirm={confirm} okText="确认" cancelText="取消">
            <Tag color='red'>删除课程</Tag>
          </Popconfirm>
        </div>
      )
    }
  ];

  return (
    <Observer>
      {() =>
        <Table
          rowKey={(record) => record.id}
          columns={columns}
          dataSource={data}
          scroll={scroll}
        />
      }
    </Observer>
  )
}

export default NetworkTable
